<!-- pagination.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页工具条</title>
    <style>        .pagination {
        display: inline-block;
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        font-family: Arial, sans-serif;
    }

    .step-links {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .step-links a,
    .step-links span.current {
        padding: 6px 12px;
        text-decoration: none;
        color: #333;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .step-links a:hover {
        background-color: #007bff;
        color: white;
    }

    .step-links .current {
        background-color: #007bff;
        color: white;
        font-weight: bold;
        border-radius: 4px;
    }

    /* 禁用链接样式 */
    .disabled {
        color: #ccc;
        pointer-events: none;
        background-color: transparent;
    }
    </style>

    <script>function goToPage() {
        const page = document.getElementById('pageInput').value;
        if (page && page >= 1 && page <= {{ users.paginator.num_pages }}) {
            window.location.href = "?page=" + page;
        } else {
            alert("请输入有效的页码");
        }
    }
    </script>
</head>
<body>

<div class="pagination">
    <span class="step-links">
        {% if users.has_previous %}
            <a href="?page=1">&laquo; 第一页</a>
            <a href="?page={{ users.previous_page_number }}">上一页</a>
        {% else %}
            <span class="disabled">&laquo; 第一页</span>
            <span class="disabled">上一页</span>
        {% endif %}

        <span class="current">
            当前页码: {{ users.number }} / {{ users.paginator.num_pages }}.
        </span>

        {% if users.has_next %}
            <a href="?page={{ users.next_page_number }}">下一页</a>
            <a href="?page={{ users.paginator.num_pages }}">最后一页 &raquo;</a>
        {% else %}
            <span class="disabled">下一页</span>
            <span class="disabled">最后一页 &raquo;</span>
        {% endif %}
        <input type="number" id="pageInput" min="1" max="{{ users.paginator.num_pages }}" placeholder="页码">
        <button onclick="goToPage()">跳转</button>
    </span>
</div>

</body>
</html>